<template>
  <div >
    <div v-if="tabs && tabs.items" class="page-menu-tabs main-tab">
          <a-tabs :tabBarStyle="{margin: 0}" @change="tabs.callback" :activeKey="tabs.active()"  @tabClick="tabs.callback">
            <a-tab-pane v-for="item in tabs.items" :key="item.key">
                <span slot="tab">
                  {{item.title}}
                  <a-tooltip
                      placement="top"
                      :title="item.tips"
                    >
                  <a-icon type="question-circle" />
                </a-tooltip>
                </span>
            </a-tab-pane>
          </a-tabs>
      </div>
    <div class="search-content">
        <router-view />
     </div>
  </div>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
  export default {
    components: { PageLayout },
    data () {
      return {
        tabs: {
          items: [
           {
              key: '1',
              title: '策略配置',
              tips:'可对平台操作功能进行更多便捷配置操作'
            },
            {
              key: '2',
              title: '指派列表',
              tips:'指数据配置-指派规则的配置入口'
            },
            {
              key: '3',
              title: '验证管理',
              tips:'指给“反馈验证”的“用户账号”设置对应手机号码进行验证匹配'
            },
            {
              key: '4',
              title: '锁定规则',
              tips:'指可通过新增规则选择角色下的用户进行锁定数据'
            },
          ],
          active: () => {
            console.log("this.$route.path",this.$route.path);
            switch (this.$route.path) {
              case '/earlyWarning/strategy/policyConfig/list':
                return '1'
              case '/earlyWarning/strategy/designateList':
                return '2'
              case '/earlyWarning/strategy/verifyManage':
                return '3'
              case '/earlyWarning/strategy/lockRule/list':
              case '/earlyWarning/strategy/lockRule/add':
              case '/earlyWarning/strategy/lockRule/edit':
                return '4'
              default:
                return '1'
            }
          },
          callback: (key) => {
            switch (key) {
              case '1':
                this.$router.push('/earlyWarning/strategy/policyConfig/list')
                break
              case '2':
                this.$router.push('/earlyWarning/strategy/designateList')
                break
              case '3':
                this.$router.push('/earlyWarning/strategy/verifyManage')
                break
              case '4':
                this.$router.push('/earlyWarning/strategy/lockRule/list')
                break
            }
          }
        },
        search: true
      }
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
  .search-head{
    background-color: #fff;
    margin: -25px -24px -24px;
    .search-input{
      text-align: center;
      margin-bottom: 16px;
    }
  }
  .search-content{
    // padding: 24px;
    margin-top:12px;
    // background: #fff;
    min-height: 400px;
  }
  .page-menu-tabs {
    // padding: 24px;
    // padding: 24px 0px 0;
    background: #fff;
    border-radius: 2px;
  }
  .main-tab{
    /deep/.ant-tabs-nav .ant-tabs-tab .anticon {
        margin-right: 0px;
    }
    /deep/.anticon {
      display: inline-block;
      color: inherit;
      font-style: normal;
      line-height: 0;
      text-align: center;
      text-transform: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
</style>